<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">民警查询条件</div>
      </div>
      <el-form
        ref="searchObj"
        :inline="true"
        :model="searchObj"
        size="mini"
        label-width="100px"
        style="margin-bottom: -10px; margin-top: 10px"
      >
        <el-form-item label="警员姓名">
          <el-input
            v-model="searchObj.name"
            class="police-name"
            placeholder="请输入警员姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属网格">
          <el-select
            v-model="searchObj.gridName"
            class="gridName_select_class"
            placeholder="请选择所属网格"
            filterable
          >
            <el-option
              v-for="item in selfAreaList"
              :key="item.value"
              :label="item.gridName"
              :value="item.gridName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" icon="el-icon-search" @click="query"
            >查询</el-button
          >
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <div class="common-title-div"></div>
          <div class="common-title-text">民警查询列表</div>
        </div>
        <div style="display: flex">
          <el-upload
            v-if="
              typeCode == 'police' &&
              roleCode !== 'policeCommunity' &&
              roleCode !== 'policeGeneral'
            "
            class="upload-file"
            :headers="uploadHeader"
            :before-upload="beforeUpload"
            :action="uploadUrl"
            :on-success="uploadSucess"
            :on-error="uploadError"
            :show-file-list="false"
          >
            <el-button type="primary" icon="el-icon-download"
              >批量导入</el-button
            >
          </el-upload>
          <el-button
            type="primary"
            v-if="
              typeCode == 'police' &&
              roleCode !== 'policeCommunity' &&
              roleCode !== 'policeGeneral'
            "
            size="mini"
            style="height: 32px; margin-left: 10px"
            @click="allExportClick"
            icon="el-icon-position"
            >下载模版</el-button
          >
          <el-button
            type="primary"
            style="height: 32px"
            @click="alldaochuClick"
            icon="el-icon-upload2"
            >批量导出</el-button
          >
          <el-button
            type="primary"
            v-if="
              typeCode == 'police' &&
              roleCode !== 'policeCommunity' &&
              roleCode !== 'policeGeneral'
            "
            style="height: 32px"
            icon="el-icon-circle-plus-outline"
            @click="addPolice"
            >添加</el-button
          >
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table
        :data="tableData"
        size="mini"
        :row-style="rowStyle"
        :header-cell-style="tableHeaderColor"
        style="width: 100%; margin-top: 10px; margin-bottom: 10px"
        max-height="550"
        border
      >
        <el-table-column
          prop="name"
          label="警员姓名"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="identity"
          label="警员身份证"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="gridName"
          label="所属网格"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            {{ statusObj[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="500"
          align="center"
          v-if="
            typeCode == 'police' &&
            roleCode !== 'policeCommunity' &&
            roleCode !== 'policeGeneral'
          "
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              v-if="scope.row.roleId == '4' || scope.row.roleId == '5'"
              @click="editareaClick(scope.row)"
              >变更辖区</el-button
            >
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-s-operation"
              @click="editroleClick(scope.row)"
              >角色变更</el-button
            >
            <el-button
              type="success"
              size="mini"
              icon="el-icon-video-play"
              v-if="scope.row.status == '0'"
              @click="startClick(scope.row)"
              >启用</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-remove"
              v-if="scope.row.status == '1'"
              @click="forbidClick(scope.row)"
              >停用</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-tickets"
              @click="detailsClick(scope.row)"
              >详情</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteClick1(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- 导入成功或失败列表 -->
    <el-dialog
      title="导入列表"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="daoruFlag"
      width="80%"
      :before-close="daoruClose"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">导入列表</div>
      </div>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入成功列表</div>
      </div>
      <el-table
        :data="successList"
        size="mini"
        :row-style="rowStyle"
        :header-cell-style="tableHeaderColor"
        style="width: 100%; margin-top: 10px; margin-bottom: 10px"
        max-height="550"
        border
      >
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="accountName"
          label="账号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="200"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="roleId"
          label="角色"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column prop="name" label="警员姓名"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="identity" label="警员身份证"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="phone" label="警员电话"  show-overflow-tooltip align="center">
                </el-table-column> -->
        <el-table-column
          prop="girdName"
          label="所属网格"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入失败列表</div>
      </div>
      <el-table
        :data="failList"
        size="mini"
        :row-style="rowStyle"
        :header-cell-style="tableHeaderColor"
        style="width: 100%; margin-top: 10px; margin-bottom: 10px"
        max-height="550"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="accountName"
          label="账号"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.accountName"
              placeholder="请输入账号"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.password"
              placeholder="请输入密码"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.nickName"
              placeholder="请输入昵称"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="roleId" label="角色" width="200" align="center">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.roleId"
              placeholder="请选择选择角色"
              style="width: 100%"
              @change="chooseRoleChange3(scope.row)"
            >
              <el-option
                v-for="item in chooseRoleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="警员姓名" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入警员姓名" clearable ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="identity" label="警员身份证" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.identity" placeholder="请输入警员身份证" clearable ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="警员电话" width="200" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.phone" placeholder="请输入警员电话" clearable ></el-input>
                    </template>
                </el-table-column> -->
        <el-table-column
          prop="girdName"
          label="所属网格"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.girdName"
              :disabled="scope.row.roleId == '2' || scope.row.roleId == '3'"
              placeholder="请选择所属网格"
              style="width: 100%"
            >
              <el-option
                v-for="item in selfAreaList"
                :key="item.value"
                :label="item.gridName"
                :value="item.gridName"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="errorMsg"
          label="失败原因"
          width="200"
          show-overflow-tooltip
          align="center"
        >
          <!-- <template slot-scope="scope">
                        <div style="color:red;">{{scope.row.errorMsg}}</div>
                    </template> -->
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-success"
              @click="confirmClick(scope.row)"
              >确定</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete-solid"
              @click="deleteClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          :disabled="failList.length !== 0"
          @click="daoruClick"
          >提交</el-button
        >
        <el-button size="mini" @click="daoruClose">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="角色变更"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="bhFlag"
      width="50%"
      :before-close="cancel1"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">角色变更</div>
      </div>
      <el-form
        ref="inputObj1"
        :model="inputObj1"
        label-width="100px"
        :rules="rules1"
      >
        <el-form-item label="选择角色" prop="roleId">
          <el-select
            v-model="inputObj1.roleId"
            placeholder="请选择选择角色"
            style="width: 100%"
            @change="chooseRoleChange1"
          >
            <el-option
              v-for="item in chooseRoleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属网格"
          prop="gridId"
          v-if="inputObj1.roleId == '5' || inputObj1.roleId == '4'"
        >
          <el-select
            v-model="inputObj1.gridId"
            placeholder="请选择所属网格"
            style="width: 100%"
          >
            <el-option
              v-for="item in addselfAreaList"
              :key="item.value"
              :label="item.gridName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit1">提 交</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="辖区变更"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="areaFlag"
      width="50%"
      :before-close="cancel2"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">辖区变更</div>
      </div>
      <el-form
        ref="inputObj2"
        :model="inputObj2"
        label-width="100px"
        :rules="rules2"
      >
        <el-form-item label="所属网格" prop="gridId">
          <el-select
            v-model="inputObj2.gridId"
            placeholder="请选择所属网格"
            @change="gridIdChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in addselfAreaList"
              :key="item.value"
              :label="item.gridName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit2">提 交</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 新增警员 和修改警员-->
    <el-dialog
      :title="isEditTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="newaddFlag"
      width="50%"
      :before-close="cancel"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">{{ isEditTitle }}</div>
      </div>
      <el-form
        ref="inputObj"
        :model="inputObj"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="选择角色" prop="roleId">
          <el-select
            v-model="inputObj.roleId"
            placeholder="请选择选择角色"
            style="width: 100%"
            @change="chooseRoleChange"
          >
            <el-option
              v-for="item in chooseRoleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="登录账号"
          prop="accountName"
          v-show="inputObj.roleId && isEditTitle == '新增警员'"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="账号格式：大小写字母或数字"
            placement="top-start"
          >
            <el-input
              v-model="inputObj.accountName"
              placeholder="请输入登录账号"
              clearable
            ></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName" v-show="inputObj.roleId">
          <el-input
            v-model="inputObj.nickName"
            placeholder="请输入昵称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="登录密码"
          prop="password"
          v-show="inputObj.roleId && isEditTitle == '新增警员'"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="密码格式：大小写字母或数字"
            placement="top-start"
          >
            <el-input
              v-model="inputObj.password"
              placeholder="请输入登录密码"
              clearable
              show-password
            ></el-input>
          </el-tooltip>
        </el-form-item>
        <!-- <el-form-item label="警员姓名" prop="name" v-show="inputObj.roleId">
                        <el-input v-model="inputObj.name" placeholder="请输入警员姓名" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="警员身份证" prop="identity" v-show="inputObj.roleId">
                        <el-input v-model="inputObj.identity"  placeholder="请输入警员身份证" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" v-show="inputObj.roleId">
                        <el-tooltip class="item" effect="dark" content="提示：请与微信绑定手机号保持一致" placement="top-start">
                            <el-input v-model="inputObj.phone" placeholder="请输入手机号码" clearable >
                            </el-input>
                        </el-tooltip>
                    </el-form-item> -->
        <el-form-item
          label="所属网格"
          prop="girdId"
          v-show="inputObj.roleId == '5' || inputObj.roleId == '4'"
          @change="gridIdChange"
        >
          <el-select
            v-model="inputObj.girdId"
            placeholder="请选择所属网格"
            style="width: 100%"
          >
            <el-option
              v-for="item in addselfAreaList"
              :key="item.value"
              :label="item.gridName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 警员详情 -->
    <el-dialog
      title="警员详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="detailsFlag"
      width="40%"
      :before-close="detailsClose"
      center
    >
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">警员详情</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">警员姓名</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.name }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">警员角色</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.roleName }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">身份证号</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.identity }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">手机号码</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.phone }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">所属网格</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.gridName }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">创建时间</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.createTime
        }}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "policeManage",
  mixins: [mixin],
  data() {
    const self = this;
    return {
      areaFlag: false,
      inputObj2: {},
      statusObj: {
        0: "已停用",
        1: "已启用",
      },
      bhFlag: false,
      successList: [],
      failList: [],
      daoruFlag: false,
      loading: false,
      uploadHeader: {},
      uploadUrl: "/wgry/police/importedPoliceInfo",
      rules1: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      rules2: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
      },
      rules: {
        accountName: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (!/^[0-9a-zA-Z]+$/.test(value.trim())) {
                callback(new Error("登录账号格式错误！"));
              } else {
                self
                  .$axios({
                    method: "get",
                    url: `/system/validateAccountExist/${value.trim()}`,
                    headers: {
                      Authorization: this.requestToken,
                    },
                  })
                  .then((res) => {
                    console.log(res.data);
                    if (res.data.code == "20000" && res.data.data) {
                      callback();
                    } else {
                      self.inputObj.accountName = "";
                      callback(new Error("账号已存在！请重新输入！"));
                    }
                  })
                  .catch((err) => {
                    callback(new Error(err));
                  });
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (!/^[0-9a-zA-Z]+$/.test(value.trim())) {
                callback(new Error("密码格式错误！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        // name: [
        //     { required: true, message: '请输入警员姓名', trigger: 'blur' },
        //     {
        //         validator: (rule, value, callback) => {
        //         if (!(/^[\u4e00-\u9fa5]+$/).test(value.trim())) {
        //             callback(new Error('姓名格式错误！'));
        //         } else {
        //             callback()
        //         }
        //         },
        //         trigger: 'blur'
        //     }
        // ],
        // identity: [
        //     { required: true, message: '请输入警员身份证', trigger: 'blur' },
        //     {
        //         validator: (rule, value, callback) => {
        //             if (!(/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value.trim())) {
        //                 callback(new Error('身份证格式错误！'));
        //             } else {
        //                 callback()
        //             }
        //         },
        //         trigger: 'blur'
        //     }
        // ],
        // phone: [
        //     { required: true, message: '请输入手机号码', trigger: 'blur' },
        //     {
        //         validator: (rule, value, callback) => {
        //             // 手机正则校验
        //             if (!(/^1[3456789]\d{9}$/).test(value.trim())) {
        //                 callback(new Error('手机号码错误！'));
        //             } else {
        //                 callback()
        //             }
        //         },
        //         trigger: 'blur'
        //     }
        // ],
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      chooseRoleList: [
        {
          value: "5",
          label: "普通民警",
        },
        {
          value: "4",
          label: "社区民警",
        },
        {
          value: "3",
          label: "公安科所队负责人",
        },
        {
          value: "2",
          label: "综合指挥室",
        },
      ],
      detailsObj: {},
      inputObj: {},
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      searchObj: {},
      selfAreaList: [],
      addselfAreaList: [],
      inputObj1: {},
      currentId: "",
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    this.initSelfAreaList();

    this.query();
  },
  methods: {
    alldaochuClick() {
      let self = this;
      self.showLoading("操作中");
      let params = {
        gridName: this.searchObj.gridName,
        name: this.searchObj.name,
      };
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/police/exportedPoliceList`,
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", "民警管理导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    gridIdChange() {
      this.$forceUpdate();
    },
    daoruClose() {
      this.daoruFlag = false;
    },
    // 确认
    confirmClick(row) {
      let self = this;
      if (!row.roleId) {
        self.$message({
          message: "请选择角色！",
          type: "error",
        });
        return;
      }
      if (row.roleId == "4" || row.roleId == "5") {
        if (!row.girdName || !row.girdName.length) {
          self.$message({
            message: "请选择所属网格！",
            type: "error",
          });
          return;
        }
      } else {
        if (!row.accountName || !row.password || !row.nickName) {
          self.$message({
            message: "请输入必填字段再提交！",
            type: "error",
          });
          return;
        }
      }
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/validateFailPolice`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.id == row.id) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/police/addPoliceInfoByImport`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.query();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.id == row.id) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    allExportClick() {
      let url = `${this.modelUrl}民警导入模板.xls`;
      window.open(url);
    },
    initaddareaList() {
      let self = this;
      this.$axios({
        method: "get",
        url: `/police/queryAddInitInfo`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          if (res.data.code == "20000") {
            self.addselfAreaList = res.data.data.grids;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 初始化所属部门
    initApartmentList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            // this.apartmentList
            console.log(res.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    // 初始化所属责任区
    initSelfAreaList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryAllGirds`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            this.selfAreaList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    chooseRoleChange3(row) {
      if (row.roleId == "2" || row.roleId == "3") {
        row.girdName = "";
      }
    },
    // 选择角色
    chooseRoleChange(value) {
      if (value == "2" || value == "3") {
        this.inputObj.gridId = "";
      }
    },
    chooseRoleChange1(value) {
      console.log(value);
      if (value == "2" || value == "3") {
        this.inputObj1.gridId = "";
      }
    },
    beforeUpload(file) {
      this.showLoading();
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.daoruFlag = true;
        this.$message({
          message: "导入成功！",
          type: "success",
        });
        this.failList = response.data.failList;
        this.successList = response.data.list;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    cancel2() {
      this.areaFlag = false;
      this.inputObj2 = {};
      this.$refs["inputObj2"].resetFields();
    },
    submit2() {
      let self = this;
      this.$refs["inputObj2"].validate((valid) => {
        if (valid) {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editGirdById/${self.currentId}/${self.inputObj2.gridId}`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("变更成功！");
                self.areaFlag = false;
                self.inputObj2 = {};
                self.$refs["inputObj2"].resetFields();
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    submit1() {
      let self = this;
      this.$refs["inputObj1"].validate((valid) => {
        if (valid) {
          self.showLoading();
          let params = {
            userId: self.currentId,
            girdId: self.inputObj1.gridId,
            roleId: self.inputObj1.roleId,
          };
          self
            .$axios({
              method: "post",
              url: `/police/editRoleById`,
              headers: {
                Authorization: self.requestToken,
              },
              params: params,
              data: params,
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("变更成功！");
                self.bhFlag = false;
                self.$refs["inputObj1"].resetFields();
                self.inputObj1 = {};
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    // 新建确认和修改确认
    submit() {
      let self = this;
      this.$refs["inputObj"].validate((valid) => {
        if (valid) {
          if (self.isEditTitle == "新增警员") {
            let params = self.inputObj;
            self.showLoading();
            self
              .$axios({
                method: "post",
                url: `/police/addPoliceInfo`,
                headers: {
                  Authorization: self.requestToken,
                },
                data: params,
                params: params,
              })
              .then((res) => {
                self.hideLoading();
                if (res.data.code == "20000") {
                  self.$message.success("新增成功！");
                  self.newaddFlag = false;
                  self.inputObj = {};
                  self.$refs["inputObj"].resetFields();
                  self.query();
                } else {
                  self.$message.error(res.data.message);
                }
              })
              .catch((err) => {
                self.hideLoading();
                self.$message.error(err);
              });
          } else {
          }
        } else {
          return false;
        }
      });
    },
    // 取消点击
    cancel() {
      this.newaddFlag = false;
      this.$refs["inputObj"].resetFields();
      this.inputObj = {};
    },
    cancel1() {
      this.bhFlag = false;
      this.$refs["inputObj1"].resetFields();
      this.inputObj1 = {};
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    // 查询
    query() {
      let params = {
        gridName: this.searchObj.gridName,
        name: this.searchObj.name,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/police/queryPageList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    //  点击重置
    reset() {
      this.searchObj = {};
      this.query();
    },
    // 启用
    startClick(row) {
      let self = this;
      this.$confirm("请确认是否启用该民警?", "启用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/1`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("启用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消启用",
          });
        });
    },
    // 删除
    deleteClick1(row) {
      this.$confirm("请确认是否删除该警员?", "删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.showLoading();
          this.$axios({
            method: "delete",
            url: `/police/deletePoliceById/${row.id}`,
            headers: {
              Authorization: this.requestToken,
            },
          })
            .then((res) => {
              this.hideLoading();
              if (res.data.code == "20000") {
                this.$message.success("删除成功！");
                this.query();
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.hideLoading();
              this.$message.error(err);
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 停用
    forbidClick(row) {
      let self = this;
      this.$confirm("请确认是否停用该民警?", "停用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/0`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("禁用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消停用",
          });
        });
    },
    // 点击新增
    addPolice() {
      this.newaddFlag = true;
      this.initaddareaList();
      this.isEditTitle = "新增警员";
    },
    // 点击详情展示
    detailsClick(row) {
      let self = this;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/police/queryPoliceInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.detailsFlag = true;
            self.detailsObj = res.data.data;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
    // 变更辖区
    editareaClick(row) {
      let self = this;
      this.initaddareaList();
      self.currentId = row.userId;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/police/queryPoliceInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.areaFlag = true;
            self.inputObj2.gridId = res.data.data.gridId;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 点击修改展示
    editroleClick(row) {
      let self = this;
      this.initaddareaList();
      self.currentId = row.userId;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/police/queryPoliceInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.bhFlag = true;
            self.inputObj1 = res.data.data;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.gridName_select_class >>> .el-input__inner {
  width: 200px;
}
/* .police-name >>> .el-input__inner{
       transition:all 0.5s ease-in-out;
  }
  .police-name >>> .el-input__inner:focus, .police-name >>> .el-input__inner:hover{
      width: 220px;
  } */
</style>